آموزش تسلط بر CSS با Sass و Bootstrap - آمادگی برای مصاحبه‌های شغلی [ویدیو] - آخرین آپدیت

سرفصل ها و درس ها

مقدمه Introduction

• مقدمه Introduction

مبانی HTML HTML Basics

• ساختار صفحه HTML HTML Page Structure

• تگ پاراگراف The Paragraph Tag

• تگ‌ها، تگ‌های خالی و المان‌ها Tags, Empty Tags & Elements

• اتریبیوت‌ها (ویژگی‌ها) Attributes

• تگ‌های div و span div & span

• تگ‌های H1 تا H6 H1 to H6

• تگ لیست بدون ترتیب (ul) The Unordered List Tag ul

• تگ لیست مرتب (ol) The Ordered List Tag ol

• تگ لینک (a Anchor) a Anchor Tag

• مفاهیم پیشرفته تگ لینک (#) a - Advanced Concept (#)

• تگ تصویر (img) img Tag

• مسیر نسبی در مقابل مسیر مطلق Relative Path vs. Absolute Path

• تگ input برای متن، عدد و ایمیل The input Tag - Text, Numeric & Email

• تگ input برای Checkbox و Radio input - Checkbox & Radio

• تگ select The select Tag

• مقایسه HTML در مقابل XHTML HTML vs. XHTML

• تگ‌های معنایی (Semantic) - Address, Footer, Section, Header Semantic Tags - Address, Footer, Section, Header

• مفهوم دسترسی‌پذیری (Accessibility) در اپلیکیشن‌های وب Concept of Accessibility in Web Applications

• اتریبیوت ARIA ARIA - Attribute

• تگ‌های متا (تگ‌های مناسب برای SEO) Meta Tags (The SEO Friendly Tags)

• نصب گوگل آنالیتیکس Installing Google Analytics

• درک مفهوم DOM Understanding DOM

مبانی CSS و انتخابگرها CSS Basics & Selectors

• مقدمه Introduction

• استایل‌دهی Inline و سینتکس پایه CSS Inline Styling and Basic CSS Syntax

• استایل‌دهی داخلی با تگ style Internal Styling with style Tag

• استایل‌دهی خارجی با تگ link External Styling - link Tag

• انتخابگر المان (Element Selector) Element Selector

• انتخابگر کلاس (Class Selector) Class Selector

• انتخابگر ترکیبی element.class element.class Selector

• انتخابگر ID ID Selector

• انتخابگر گروهی (Group Selector) Group Selector

• انتخابگر جهانی (Universal Selector) Universal Selector

• اولویت‌ها در CSS (Specificity) CSS Specificity

• انتخابگر جهانی و ریست کردن CSS Universal Selector & CSS Reset

ترکیب‌کننده‌ها و انتخابگرهای پیشرفته (بخش اول) Combinators - Advanced Selectors (Part 1)

• مقدمه Introduction

• انتخابگر نواده (Descendant Selector - space) Descendant Selector (space)

• انتخابگر فرزند (Child Selector - >) Child Selector (>)

• انتخابگر مجاور (Adjacent Selector - +) Adjacent Selector (+)

• انتخابگر اتریبیوت (element[attribute]) Attribute Selector - element[attribute]

• انتخابگر اتریبیوت با فاصله (~) Attribute Spaced Selector (~)

• انتخابگر اتریبیوت با مقدار پیشوند (^) Attribute Selector (^) - Prefixed Value

• انتخابگر اتریبیوت با مقدار پسوند ($) Attribute Selector ($) - Suffixed Value

• انتخابگر اتریبیوت شامل مقدار (*) Attribute Contains Selector (*)

• انتخابگر اتریبیوت با خط تیره (|) Attribute Hyphenated Selector (|)

پزودو کلاس‌ها و المان‌ها - انتخابگرهای پیشرفته (بخش دوم) Pseudo-classes & Elements - Advanced Selectors (Part 2)

• مقدمه Introduction

• پزودو کلاس‌های زبانی Linguistic Pseudo-classes

• پزودو کلاس‌های مکانی Location Pseudo-classes

• پزودو کلاس :hover - اکشن‌های کاربر (بخش اول) :hover - User Action Pseudo-classes (Part 1)

• پزودو کلاس :active - اکشن‌های کاربر (بخش دوم) :active - User Action Pseudo-classes (Part 2)

• پزودو کلاس :focus - اکشن‌های کاربر (بخش سوم) :focus - User Action Pseudo-classes (Part 3)

• پزودو کلاس :focus-within - اکشن‌های کاربر (بخش چهارم) :focus-within - User Action Pseudo-classes (Part 4)

• پزودو کلاس‌های :enabled / :disabled برای ورودی‌ها :enabled / :disabled - Input Pseudo-classes

• اتریبیوت‌های readonly و contenteditable readonly / contenteditable Attributes

• پزودو کلاس‌های :read-only / :read-write برای ورودی‌ها :read-only / :read-write - Input Pseudo-classes

• پزودو کلاس :placeholder-shown :placeholder-shown - Input Pseudo-class

• پزودو کلاس‌های :valid / :invalid و :required برای ورودی‌ها :valid / :invalid & :required - Input Pseudo-classes

• افزونه Live Preview برای HTML/CSS HTML/CSS Live Preview Extension

• انتخابگر :nth-child() - پزودو کلاس‌های ساختاری :nth-child() Selector - Tree Structural Pseudo-class

• انتخابگر :nth-child() - آرگومان‌های پیچیده :nth-child() Selector - Complex Arguments

• پزودو المان (تفاوت پزودو کلاس و پزودو المان) Pseudo-element (pseudo-class vs. pseudo-element)

• پزودو المان ::first-line (بخش اول) ::first-line - Pseudo-element (Part 1)

• پزودو المان ::first-letter (بخش دوم) ::first-letter - Pseudo-element (Part 2)

• پزودو المان ::before / ::after (بخش سوم) ::before / ::after - Pseudo-element (Part 3)

• پزودو المان ::before / ::after (بخش چهارم) ::before / ::after - Pseudo-element (Part 4)

فرمت‌بندی متن Text Formatting

• خانواده فونت (font-family) font-family

• قانون @font-face @font-face

• ضخامت فونت (font-weight) font-weight

• ارتفاع خط (line-height) line-height

• استایل فونت (font-style) font-style

• تغییر شکل متن (text-transform) text-transform

• واریانت فونت (font-variant) font-variant

• تزیین متن (text-decoration) text-decoration

• تراز متن (text-align) text-align

• تورفتگی متن Indenting Text

• ویژگی color - اعمال رنگ پیش‌زمینه color Property - Applying Foreground Color

کار با رنگ‌ها و گرادینت‌ها Working with Colors & Gradients

• مقدمه - روش‌های مختلف مقداردهی رنگ Introduction - Different Ways to Assign Colors

• استفاده از مقادیر RGB Using RGB Values

• نمادهای هگزادسیمال (Hexadecimal) Hexadecimal Notations

• استفاده از مقادیر HSL Using HSL Values

• کار با شفافیت (Opacity) Working with Opacity

• گرادینت‌های CSS - linear-gradient() CSS Gradients - linear-gradient()

• گرادینت‌های CSS - radial-gradient() CSS Gradients - radial-gradient()

• گرادینت‌های CSS - conic-gradient() CSS Gradients - conic-gradient()

واحدهای اندازه‌گیری در CSS CSS Units

• مقدمه Introduction

• واحدهای مطلق - px Absolute Units - px

• واحدهای مطلق - pt Absolute Units - pt

• واحدهای مطلق - cm Absolute Units - cm

• واحدهای مطلق - mm Absolute Units - mm

• واحدهای مطلق - in Absolute Units - in

• واحدهای مطلق - Pica (pc) Absolute Units - Pica (pc)

• واحدهای نسبی - em Relative Units - em

• واحدهای نسبی - rem Relative Units - rem

• واحدهای نسبی - درصد (%) Relative Units - % (Percentage)

• واحدهای نسبی - ex Relative Units - ex (x-height)

• واحدهای نسبی - ch Relative Units - ch (Character Width)

• واحدهای نسبی - vw Relative Units - vw

• واحدهای نسبی - vh Relative Units - vh

• واحدهای نسبی - vmin / vmax Relative Units - vmin / vmax

• واحدهای اندازه‌گیری زاویه - deg, grad, rad و turn Angle Measurement Units - deg, grad, rad & turn

• واحدهای اندازه‌گیری زمان - ms / s Time Measurement Units - ms / s

اصول چیدمان صفحه در CSS CSS Page Layout Fundamentals

• مقدمه Introduction

• مدل جعبه‌ای CSS (Box Model) CSS Box Model

• اعمال Border در CSS Applying Border in CSS

• اعمال Padding در CSS Applying Padding in CSS

• اعمال Margin در CSS Applying Margin in CSS

• برخورد مارجین‌ها (Collapsing) و مارجین‌های منفی Collapsing Margins and Negative Margins

• درک مفهوم Float Understanding Float

• پاکسازی Floatها (Clearing Floats) Clearing Floats

• برخورد کانتینر و Float Container/Float Collapsing

• Clearfix - روش مدرن پاکسازی Floatها Clearfix - Modern Way to Clear Floats

• ساخت چیدمان ستونی با استفاده از Float Creating Multiple Columns Floated Layout

• ویژگی display display Property

• چیدمان‌های Fixed، Fluid و Responsive Fixed, Fluid & Responsive Layouts

• درک مفهوم Gridها Understanding Grids

• اشغال ردیف‌ها و ستون‌ها در Grid Spanning Rows and Columns in Grid

• مقدمه‌ای بر CSS Flexbox Introduction to CSS Flexbox

• ویژگی‌های Flex Container Flex Container Properties

• ویژگی‌های Flex Item Flex Item Properties

• محاسبه flex-grow Calculation of flex-grow

• مقدمه‌ای بر @media Query @media Query - Introduction

• تمرین - پیاده‌سازی @media Query Assignment - Implementation of @media Query

• نوع رسانه - all Media Type - all

• نوع رسانه - screen Media Type - screen

• نوع رسانه - print Media Type - print

• ساخت یک فرم ریسپانسیو ساده با استفاده از Media Query و Breakpoint Creating a Basic Responsive Form Using Media Query with Breakpoint

تغییر شکل‌ها در CSS (Transform) CSS Transform

• مقدمه Introduction

• جابجایی المان با متد translate() Move Element With translate() Method

• متد rotate() rotate() Method

• تمرین - متد rotate() Assignment - rotate() Method

• تغییر اندازه المان‌ها با تابع scale() Resizing Elements Using scale() Function

• تغییر شکل المان‌ها با تابع skew() Transforming Elements Using skew() Function

• تمرین - اعمال skew() روی متن Assignment - skew() on Text

• متد matrix() - متد همه‌کاره matrix() - The All-in-One Method

• طراحی کارت سه بعدی (3D Card Flip) با متد transform 3D Card Flip Design Using transform Method

انتقال‌های CSS (Transitions) CSS Transitions

• مقدمه‌ای بر CSS Transitions Introduction to CSS Transitions

• انتقال ویژگی‌های CSS Transitioning CSS Properties

• تعیین سرعت و منحنی با transition-timing-function Specifying Speed & Curve with transition-timing-function

• ایجاد تاخیر با transition-delay Delaying the Transition with transition-delay

• ترکیب Transform با Transition Combining Transform with Transition

انیمیشن‌های CSS CSS Animations

• مقدمه Introduction

• قانون @keyframes @keyframes Rule

• تمرین - ساخت انیمیشن توپ bouncing Assignment - Creating a Bouncing Ball Animation

• نام و مدت زمان انیمیشن - گام اول animation-name & animation-duration - The First Step

• تاخیر انیمیشن (animation-delay) animation-delay

• کنترل تکرار با ویژگی animation-iteration-count Controlling Iterations with animation-iteration-count Property

• تمرین - کنترل تکرار انیمیشن Assignment - Controlling Iterations

• تغییر جهت انیمیشن با ویژگی animation-direction Changing Animation Direction with animation-direction Property

• تعیین منحنی سرعت با animation-timing-function Defining Speed Curve with animation-timing-function Property

• تمرین - ساخت انیمیشن پس‌زمینه Assignment - Creating Background Animation

• ویژگی animation-fill-mode animation-fill-mode Property

• تمرین - انیمیشن غروب خورشید Assignment - Sunset Animation

آموزش SASS SASS

• مقدمه Introduction

• پیکربندی SASS در پروژه Configuring SASS in Project

• متغیرها در SASS SASS Variables

• تودرتو سازی (Nesting) در SASS Nesting in SASS

• فایل‌های Partial در SASS SASS Partials

• ماژول‌های SASS SASS Modules

• میکسین‌ها (Mixins) در SASS SASS Mixins

• ارث‌بری در SASS با قانون @extend Inheritance with SASS - @extend Rule

• عملگرها (Operators) Operators

• تمرین - ساخت سایدبار ریسپانسیو با SASS Assignment - Responsive Sidebar with SASS

آموزش Bootstrap Bootstrap

• مقدمه Introduction

• پیکربندی Bootstrap Configuring Bootstrap

• کانتینرها (Containers) Containers

• کلاس‌های کمکی و Utilities Utilities/Helper Classes

• جایگزین Jumbotron در Bootstrap 5 Jumbotron (Not!) in Bootstrap 5

• دکمه‌ها (Buttons) Buttons

• دکمه‌های گروهی و اسپینرها Grouped Buttons and Spinners

• چیدمان سیستم Grid Grid System Layout

• ساخت فرم ورود با Bootstrap Login Form Using Bootstrap

• صفحه‌بندی (Pagination) به همراه تمرین Pagination with Assignment

• مودال (Modal) Modal

• تمرین مودال برای ثبت‌نام ایمیل Modal Assignment for Email Registration

• بردکرامب (Breadcrumb) Breadcrumb

• نوار ناوبری (Navigation Bar) Navigation Bar

تمرین‌های عملی Practical Assignments

• منوی پایه - نوار ناوبری بالایی Basic Menu - Top Navigation Bar

• افزودن آیتم‌های منوی Split Adding Split Menu Items

• منوی ریسپانسیو Responsive Menu

• آکاردئون افقی Horizontal Accordion

• آکاردئون‌های عمودی Vertical Accordions

• منوی سایدبار همبرگری با CSS CSS Hamburger Sidebar Menu

• فرم عضویت (Subscribe Form) Subscribe Form

• کاروسل عمودی با SCSS Vertical Carousel with SCSS

• چیدمان کارت ریسپانسیو با CSS Responsive Card Layout - CSS

• سبد خرید ریسپانسیو Responsive Shopping Cart

• افکت Parallax با CSS CSS Parallax

• فوتر ریسپانسیو با Bootstrap Responsive Footer with Bootstrap